<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-form :inline="true" size="mini" label-width="10px;">
                <el-form-item label="状态:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.status" clearable>
                        <el-option label="全部" :value="0"></el-option>
                        <el-option label="已登记" :value="1"></el-option>
                        <el-option label="已分配" :value="2"></el-option>
                        <el-option label="已完成" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="配送状态:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.deliveryStatus" clearable>
                        <el-option label="全部" :value="0"></el-option>
                        <el-option label="已送达" :value="1"></el-option>
                        <el-option label="不要了" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.villageId" clearable>
                        <el-option v-for="item in villageItems" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="登记员:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.createUserId" clearable>
                        <el-option v-for="item in employeeUserItems" :key="item.id" :label="item.nickName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="配送员:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.deliveryUserId" clearable>
                        <el-option v-for="item in deliveryUserItems" :key="item.id" :label="item.nickName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="登记时间:">
                    <el-date-picker v-model="condition.date" style="width: 130px" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="condition.contactNumber" class="form-item"></el-input>
                </el-form-item>

                <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
            </el-form>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="60px"/>
            <el-table-column prop="villageName" label="小区" header-align="center" align="center"/>
            <el-table-column prop="tung" label="地址" header-align="center" align="center" width="160px">
                <template slot-scope="scope">
                    {{ scope.row.tung + "-" + scope.row.unit + "-" + scope.row.house}}
                </template>
            </el-table-column>
            <el-table-column prop="contactNumber" label="联系电话" header-align="center" align="center" width="100px"/>
            <el-table-column prop="remark" label="备注" header-align="center" align="center"/>

            <el-table-column prop="createUserName" label="登记人" header-align="center" align="center" width="100px"/>
            <el-table-column prop="createTime" label="登记时间" header-align="center" align="center" width="140px;"/>

            <el-table-column prop="deliveryUserName" label="配送人" header-align="center" align="center" width="100px"/>
            <el-table-column prop="deliveryTime" label="配送时间" header-align="center" align="center" width="140px;"/>

            <el-table-column prop="status" label="状态" header-align="center" align="center" :formatter="formatter"/>
            <el-table-column prop="deliveryStatus" label="配送状态" header-align="center" align="center" :formatter="formatter"/>

            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="60px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" v-if="scope.row.status === 1" @click="showDistribute(scope.row)" style="color: green">分配</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog title="分配配送员" :visible.sync="dialogVisible" width="400px" append-to-body>
            <el-form ref="form" :model="form" label-width="110px" size="mini">
                <el-select size="mini" placeholder="请选择" class="form-item" v-model="form.employeeUserId" clearable>
                    <el-option v-for="item in deliveryUserItems" :key="item.id" :label="item.nickName" :value="item.id"></el-option>
                </el-select>
                <el-form-item style="margin-top: 30px;">
                    <el-button type="primary" @click="onSubmit" :loading="btnLoading">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {promotionList, promotionDistribution} from '@/api/activity/promotion'
    import {villageItems} from '@/api/base/village'
    import {employeeUserItems} from '@/api/employee/user'

    export default {
        name: 'Batch',
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                loading: false,
                dialogVisible: false,
                btnLoading: false,
                villageItems: [],
                employeeUserItems: [],
                deliveryUserItems: [],
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    status: 0,
                    deliveryStatus: 0,
                    villageId: null,
                    createUserId: null,
                    deliveryUserId: null,
                    date: null,
                    contactNumber: null
                },
                data: {},
                form: {
                    id: null,
                    employeeUserId: null,
                    employeeUserName: null
                }
            }
        },
        computed: {},
        mounted() {
            this.loadVillageItems()
            this.loadEmployeeUserItems()
            this.loadList()
        },
        methods: {
            formatter(row, column) {
                if (column.property === 'status') {
                    switch (row.status) {
                        case 1:
                            return '已登记'
                        case 2:
                            return '已分配'
                        case 3:
                            return '已完成'
                    }
                } else if (column.property === 'deliveryStatus') {
                    switch (row.deliveryStatus) {
                        case 1:
                            return '已送达'
                        case 2:
                            return '不要了'
                        default:
                            return '—'
                    }
                }
            },
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadVillageItems() {
                let res = await villageItems();
                this.villageItems = res.data
            },
            async loadEmployeeUserItems() {
                let res = await employeeUserItems();
                this.employeeUserItems = res.data
                res = await employeeUserItems({type: 3});
                this.deliveryUserItems = res.data
            },
            async loadList() {
                this.loading = true
                let res = await promotionList(this.condition)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            showDistribute(row) {
                this.dialogVisible = true
                this.form.id = row.id
                this.form.employeeUserId = null
                this.form.employeeUserName = null
            },
            onSubmit() {
                if (!this.form.employeeUserId) {
                    this.$message({message: '请选择配送员', type: 'warning'})
                    return
                }
                let _this = this
                this.deliveryUserItems.forEach(item => {
                    if (_this.form.employeeUserId === item.id) {
                        _this.form.employeeUserName = item.nickName;
                    }
                })

                this.distributeIng()
            },
            async distributeIng() {
                this.btnLoading = true;
                let res = await promotionDistribution(this.form);
                this.btnLoading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                this.dialogVisible = false
                this.$refs.form.resetFields();
                this.loadList()
            }
        }
    }
</script>

<style scoped>

</style>